<template>
  <div class="companyCheckbox">
    <van-nav-bar :title="navTitle" left-arrow @click-left="$router.back()">
      <template #right>
        <van-icon style="margin-right: 20px" name="search" size="20" @click="goNeedPage_recruitStaff('search')" />
        <van-icon name="ellipsis" size="18" />
      </template>
    </van-nav-bar>
    <!-- 单选框 -->
    <!-- <van-radio-group v-model="radio" v-if="parseInt(id) == 1 || parseInt(id) == 2">
      <van-cell-group>
        <van-cell v-for="(item, index) in list" :key="index" :title="item.value" clickable @click="toRadio(item)">
          <template #right-icon>
            <van-radio :name="item.item" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group> -->
    <!-- 多选框 -->
    <van-checkbox-group v-model="result" ref="checkboxGroup">
    <!-- <van-checkbox-group v-model="result" ref="checkboxGroup" v-if="parseInt(id) == 3 || parseInt(id) == 4"> -->
      <van-cell-group>
        <van-cell v-for="(item, index) in list" clickable :key="index" :title="item.value" @click="toggle(index)">
          <template #right-icon>
            <van-checkbox :name="item" ref="checkboxes" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-checkbox-group>
    <!-- 全选，反选 -->
    <div class="fixed-bottom">
      <van-radio-group v-model="radio" class="radio">
        <van-checkbox v-model="checked" @click="checkAll"
          >全选</van-checkbox
        >
        <!-- <van-checkbox v-model="checked" @click="checkAll" v-if="parseInt(id) == 3 || parseInt(id) == 4"
          >全选</van-checkbox
        > -->
      </van-radio-group>
      <div class="add" v-if="id != 4" @click="toDeapateMent">
        <van-icon name="plus" class="icon" />
        <span>新建</span>
      </div>
      <van-button type="primary" block @click="saveUp" class="button">保存</van-button>
    </div>
    <div style="height: 60px"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [], //获取
      result: [], //发送
      checked: false, //全选标识
      id: this.$route.params.id,
      navTitle: '', //顶部栏标题
      radio: 0
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      //1--部门，2--职位,3---数据权限,4---操作权限
      switch (parseInt(this.id)) {
        case 1:
          //模拟数据
          this.navTitle = '部门'
          this.list = [
            {
              item: 1,
              value: '部门1'
            },
            {
              item: 2,
              value: '部门2'
            }
          ]
          break
        case 2:
          //模拟数据
          this.navTitle = '职位'
          this.list = [
            {
              item: 1,
              value: '职位1'
            },
            {
              item: 2,
              value: '职位2'
            }
          ]
          break
        case 3:
          //模拟数据
          this.navTitle = '数据权限'
          this.list = [
            {
              item: 1,
              value: '发布人昵称'
            },
            {
              item: 2,
              value: '发布人昵称'
            }
          ]
          break
        case 4:
          this.navTitle = '操作权限'
          this.list = [
            {
              item: 1,
              value: '发布招聘信息'
            },
            {
              item: 2,
              value: '公司客服，加好友'
            }
          ]
          break
      }
    },
    toggle(index) {
      this.$refs.checkboxes[index].toggle()
      setTimeout(() => {
        // console.log(this.result, this.list)
        if (this.result.length == this.list.length) {
          //   console.log('==')
          this.checked = true
        } else {
          this.checked = false
        }
      })
    },
    // 全选
    checkAll() {
      if (this.checked) {
        this.$refs.checkboxGroup.toggleAll(true)
      } else {
        this.$refs.checkboxGroup.toggleAll()
      }
    },
    //单选
    toRadio(data) {
      this.result = data
    },
    //新建
    toDeapateMent(index) {
      // 1---新建部门，2---新建职位，4---数据权限
      let id = this.id
      this.$router.push({
        path: `/comNewDepartment/${id}`
      })
    },
    // 保存
    saveUp() {
      // 把result发送出去
      console.log('要发送的数据', this.result)
    }
  }
}
</script>

<style lang="scss" scoped>
.companyCheckbox {
  width: 100%;
  .fixed-bottom {
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 10px;
    justify-content: space-between;
    // border-top: 1px solid #e4e4e4;
    box-shadow: 0 0 2px #e4e4e4;
    background: white;
    white-space: nowrap;
    .radio {
      flex-shrink: 0;
      // margin: 0 10 0 ;
      margin-right: 10px;
    }
    .add {
      border: 1px solid royalblue;
      color: royalblue;
      font-size: 14px;
      padding: 1px;
      margin-right: 10px;
      border-radius: 2px;
    }
    .button {
      width: 75%;
      height: 80%;
      background: cornflowerblue;
      border: none;
    }
  }
}
</style>